<template>
  <baseCard
    :height="workorderHight"
    :title="'运维工单流转分析'"
    :contentStyle="contentStyle"
    style="margin-right: 0; margin-left: 0; margin-bottom: 0.16rem"
  >
    <div class="sm-data-echarts-layout">
      <div class="trace-content">
        <div class="trace-content-left">
          <div class="left-top">
            <div
              :class="type == 1 ? 'default-active' : 'default'"
              @click="handleChange(1)"
            >
              <span :class="type == 1 ? 'label1' : 'label'">产生工单量</span>
              <span :class="type == 1 ? 'value1' : 'value'">{{
                addThousandsSeparator(cardData?.order_num)
              }}</span>
            </div>
            <div
              :class="type == 2 ? 'default-active' : 'default'"
              @click="handleChange(2)"
            >
              <span :class="type == 2 ? 'label1' : 'label'"
                >转提需求开发量</span
              >
              <span :class="type == 2 ? 'value1' : 'value'">{{
                addThousandsSeparator(cardData?.demand_num)
              }}</span>
            </div>
            <div
              :class="type == 3 ? 'default-active' : 'default'"
              @click="handleChange(3)"
            >
              <span :class="type == 3 ? 'label1' : 'label'"
                >转提缺陷处理量</span
              >
              <span :class="type == 3 ? 'value1' : 'value'">{{
                addThousandsSeparator(cardData?.bugs_num)
              }}</span>
            </div>
          </div>
          <div class="left-content">
            <div class="bar-view">
              <VptReviewBar
                :workOrderData="workOrderData"
                :chartType="chartType"
              ></VptReviewBar>
              <div
                class="vpt-plan-value"
                v-if="workOrderData.length == 0"
                :style="noDataStyle"
              >
                <img
                  src="../../../../assets/img/theme3/wmpty.png"
                  alt="暂无数据"
                />
                <div class="no-data">暂无数据</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </baseCard>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { addThousandsSeparator } from "@/utils/formatter.js";
import BaseCard from "@/components/vpt-cards-1001/index.vue";
import VptReviewBar from "./vpt-review-bar.vue";

const emit = defineEmits(["change"]);

const props = defineProps({
  chartType: { type: String, default: "init" },
  defaultValue: { type: String },
  options: {
    typeof: Array,
    default: () => [],
  },
  baseInfo: { type: Object, default: () => ({}) },
  deviceNum: { type: Object, default: () => ({}) },
  workorderHight: { type: String, default: "10.3rem" },
  workOrderData: { type: Array, default: () => [] },
  cardData: { type: Object, default: {} },
});

const contentStyle = {
  paddingTop: 0,
};

const type = ref(1);

const handleChange = (item) => {
  type.value = item;
  emit("change", item);
};
</script>

<style lang="less" scoped>
.sm-data-echarts-layout {
  width: 100%;
  height: 100%;

  .trace-content {
    width: 100%;
    .trace-content-left {
      flex: 1;
      display: flex;
      flex-direction: column;

      .left-top {
        display: flex;
        justify-content: space-between;
        .default {
          width: 2.6rem;
          height: 0.5rem;
          border: 1px solid #e6ebf5;
          background-image: linear-gradient(180deg, #f2f7ff 0%, #fdfeff 100%);
          border-radius: 4px;
          padding: 0.12rem 0.12rem 0.08rem 0.12rem;
          cursor: pointer;
        }
        .default-active {
          width: 2.6rem;
          color: #fff;
          height: 0.5rem;
          border-radius: 4px;
          border: 1px solid #165dff;
          background-color: #165dff;
          // background-image: url("../../../../assets/img/theme1/tabs.png");
          background-size: 100% 100%;
          padding: 0.12rem 0.12rem 0.08rem 0.12rem;
          cursor: pointer;
        }
        .label {
          display: block;
          font-size: 0.14rem;
          color: #4e5969;
        }
        .value {
          display: block;
          margin-top: 0.08rem;
          font-size: 0.18rem;
          font-weight: 500;
          // font-family: HarmonyOS_Sans_SC_Medium;
          color: #1d2129;
        }
        .label1 {
          display: block;
          font-size: 0.14rem;
          color: #fff;
        }
        .value1 {
          display: block;
          margin-top: 0.08rem;
          font-size: 0.18rem;
          font-weight: 500;
          font-family: HarmonyOS_Sans_SC_Medium;
          color: #fff;
        }
      }
      .left-content {
        flex: 1;
        margin-top: 0.2rem;
        .bar-view {
          height: 100%;
        }
      }
    }
  }
}
.vpt-plan-value {
  padding-top: 0.2rem;
  font-size: 0.16rem;
  text-align: center;
  color: #1d2129;
  position: relative;
  top: -1.7rem;
}
</style>
